<template>
  <d2-container>
    <template slot="header">
      <el-form
        ref="addForm"
        :model="addForm"
        style="height: auto"
      >
        <template>
          <!-- <el-row
            ><el-col :span="24"
              ><div class="grid-content bg-purple-dark titleClass">
                图片收藏夹
              </div></el-col
            ></el-row
          > -->
          <el-form-item label="图片描述">
            <el-input
              v-model="addForm.remark"
              style="width: 30%"
              placeholder="请输入图片描述"
            ></el-input>
            <el-button
              type="primary"
              @click="searchImageList()"
              style="margin-left: 20px"
              >查询</el-button
            >
            <el-button @click="reset()" style="margin-left: 20px"
              >重置</el-button
            >
          </el-form-item>
        </template>
        <!-- 保存 -->
      </el-form>
    </template>
    <template>
      <el-table :data="tableData" stripe border style="width: 100%">
        <el-table-column fixed label="图片" width="100px">
          <template slot-scope="scope">
            <el-popover placement="top-start" title="" trigger="hover">
              <img :src="scope.row.imageUrl" alt="" style="width: 360px;height: 360px">
              <img slot="reference" :src="scope.row.imageUrl" style="width: 30px;height: 30px">
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column fixed prop="remark" label="图片描述">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="deleteRow(scope.row)">
              <el-tag type="primary" disable-transitions>删除</el-tag>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </template>
		<template slot="footer">
			<div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
    </template>
  </d2-container>
</template>
<script>
import {
  findAllListByPage,
  deleteImage
} from '@api/sysImageFavorite/sysImageFavorite'
export default {
  name: 'system-route',
  data () {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      addForm: {
        remark: ''
      },
      tableData: []
    }
  },
  watch: {},
  methods: {
    fetchData () {
      findAllListByPage({
        remark: this.addForm.remark,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      })
        .then((res) => {
          this.tableData = res.data.content
          this.total = res.data.total
          this.loading = false
        })
        .catch((err) => {
          console.log('err', err)
          this.loading = false
        })
    },
    handleSizeChange (val) {
      this.pageSize = val
      this.fetchData()
    },
    handleCurrentChange (val) {
      this.currentPage = val
      this.fetchData()
    },
    searchImageList () {
      this.currentPage = 1
      this.fetchData()
    },
    onSubmit (formName) {},
    deleteRow (row) {
      this.$confirm('确认删除吗？').then((_) => {
        deleteImage({
          id: row.id
        })
          .then((res) => {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.fetchData()
            this.loading = false
          })
          .catch((err) => {
            console.log('err', err)
            this.loading = false
          })
      })
    },
    reset () {
      this.addForm.remark = ''
      this.fetchData()
    }
  },
  created () {},
  mounted () {
    this.fetchData()
  },
  computed: {}
}
</script>
